import React, { Component } from 'react';
import '../asserts/css/index.css'
import {getNew,getGroupOn,getSecKill,getIndexGoods} from '../request/index'
class Index extends Component {

      state = {
          //新人专享
          getNewList:[],
          //万人团
          getGroupOnList:[],
          //现时秒杀
          getSecKillList:[],
          //商品分类
          getIndexGoodsList:[{content:[]},{content:[]},{content:[]},{content:[]}],
          //索引
          index:0
      }
      UNSAFE_componentWillMount()
      {
          //新人专享
          getNew().then((res)=>{
              if(res.code === 200)
              {
                 this.setState({getNewList:res.list})
              }
          });
          //万人团
          getGroupOn().then((res)=>{
                if(res.code===200)
                {
                    this.setState({getGroupOnList:res.list})
                }
          });
          //现时秒杀
          getSecKill().then((res)=>{
              if(res.code===200)
              {
                  this.setState({getSecKillList:res.list})
              }
          });
          //商品分类
          getIndexGoods().then(res=>{
              if(res.code === 200)
              {
                  this.setState({getIndexGoodsList:res.list})
              }
          })
      }
      changeIndex(index)
      {
        this.setState({index})
      }
    render() {
        let {getNewList,getGroupOnList,getSecKillList,getIndexGoodsList,index} = this.state
        return (
 <div className="container">
        <div className="header">
            <img src="../asserts/image/logo.png" alt=""/>
            <form action="">
                <input type="text" placeholder="搜索商品"/>
                <button>搜索</button>
            </form>
        </div>
        {/* <!-- 新人专享 --> */}
        <div className="middle">
            <div className="xrzx">
                <div className="clearfix top">
                    <h2 className="ft">新人专享</h2>
                    <a href="#/" className="rt">查看全部</a>
                </div>
            </div>

            <div className="xrzx1">
                <p>
                    <span>1重礼</span>
                    <span>新人特价商品专区</span>
                    <span>（限量供应，先到先得）</span>
                </p>

                <div className="look">
                    <ul>
                        {
                            getNewList.map(item=>{
                                return <li key={item.id}>
                                <img src={this.$staticUrl + item.img} alt=""/>
                                <span className="now">￥{item.price}</span>
                                <span className="pri">￥{item.market_price}</span>
                            </li> 
                            })
                        }
                    </ul>
                </div>

            </div>
            <div className="xrzx2">
                <p>
                    <span>2重礼</span>
                    <span>新人通用50元礼券（下单立减，省了又省）</span>
                </p>
                <div>
                    <img className="yh1" src="./asserts/image/yh.png" alt=""/>
                    <img className="yh2" src="./asserts/image/yh2.png" alt=""/>
                </div>
            </div>
        </div>
        <div className="middle-nav box">
            <ul>
                <li>
                    <a href="#/">
                        <img src="./asserts/image/seckill.png" alt=""/>
                        <p>限时秒杀</p>
                    </a>
                </li>
                <li>
                    <a href="#/">
                        <img src="./asserts/image/top.png" alt=""/>
                        <p>畅销商品</p>
                    </a>
                </li>
                <li>
                    <a href="#/">
                        <img src="./asserts/image/brand.png" alt=""/>
                        <p>品质大牌</p>
                    </a>
                </li>
                <li>
                    <a href="#/">
                        <img src="./asserts/image/selfsupport.png" alt=""/>
                        <p>小u自营</p>
                    </a>
                </li>
                <li>
                    <a href="#/">
                        <img src="./asserts/image/integral.png" alt=""/>
                        <p>积分商城</p>
                    </a>
                </li>
            </ul>
        </div>
        {/* <!-- 万人团 --> */}
        <div className="ms">
            <div className="cjms">
                <div className="top">
                    <h2 className="ft">万人团</h2>
                </div>
                {
                    getGroupOnList.map(item=>{
                        return  <div className="content" key={item.id}>
                              <img src={this.$staticUrl+item.img} alt=""/>
                        <div>
                            <span>7.9折</span>
                            <p>{item.goodsname}......</p>
                            <b>每人限购1件</b>
                            <p><b>￥{item.price}</b><u>{item.market_price}</u></p>
                             </div>
                         </div>
                    })
                }
              
            </div>
            {/* <!-- 限时秒杀 --> */}

            <div className="xsms">
                <p>
                    <span>限时秒杀</span>
                    <span>新人特价商品专区</span>
                    <span>（限量供应，先到先得）</span>
                </p>
                <div className="look">
                    <ul>
                        {
                            getSecKillList.map(item=>{
                                return  <li key={item.id}>
                                <img src={this.$staticUrl+item.img} alt=""/>
                                <span className="now">￥{item.price}</span>
                                <span className="pri">￥{item.market_price}</span>
                            </li>
                            })
                        }
                  
                    </ul>
                </div>
            </div>
        </div>
        <div className="two11">
            <div className="one">
                <h3>双11尖货预约</h3>
                <img src="../asserts/image/11.png" alt=""/>
            </div>
            <div className="three">
                <h3>畅购全球</h3>
                <img src="../asserts/image/cg1.png" alt=""/>
                <img src="../asserts/image/cg2.png" alt=""/>
            </div>
        </div>
        {/* <!-- 首页推荐 --> */}
        <div className='nav'>
            <ul>
                <li className={index === 0 ? 'active':""} onClick={()=>{this.changeIndex(0)}}>
                    <p>热销好货</p>
                    <span>限量抢购</span>
                </li>
                <li className={index === 1 ? 'active':""} onClick={()=>{this.changeIndex(1)}}>
                    <p>折上折区</p>
                    <span>不买就亏</span>
                </li>
                <li className={index === 2 ? 'active':""}  onClick={()=>{this.changeIndex(2)}}>
                    <p>时令水果</p>
                    <span>当季限定</span>
                </li>
                <li className={index === 3 ? 'active':""} onClick={()=>{this.changeIndex(3)}}>
                    <p>粮油调味</p>
                    <span>一键购齐</span>
                </li>
            </ul>
        </div>
        <div className="main">
          {
              getIndexGoodsList[index].content.map(item=>{
                  return <div className="item clearfix" key={item.id}>
                  <div className="pic ft">
                      <img src={this.$staticUrl+item.img} alt=""/>
                  </div>
                  <div className="intro ft">
                      <span>7.9折</span>
                      <p>{item.goodsname}......</p>
  
                      <u>￥{item.price}</u>
                      <u>￥{item.market_price}</u>
                      <button>加入购物车</button>
                  </div>
              </div>

              })
          }
        </div>
    </div>
        );
    }
}

export default Index;